<template>
  <div ref="textContainer" :style="{ width: typeof width === 'number' ? `${width}px` : width }">
    <el-tooltip
      v-if="isOverflowing"
      :content="contentValue"
      placement="top"
      :effect="effect"
      :disabled="!isOverflowing"
    >
      <div
        ref="textContent"
        class="tooltip-text"
        :style="{
          '-webkit-line-clamp': maxLines,
          width: '100%'
        }"
      >
        <slot>{{ content }}</slot>
      </div>
    </el-tooltip>
    <div
      v-else
      ref="textContent"
      class="tooltip-text"
      :style="{
        '-webkit-line-clamp': maxLines,
        width: '100%'
      }"
    >
      <slot>{{ content }}</slot>
    </div>
  </div>
</template>

<script setup>
import {computed, nextTick, onMounted, ref, watch} from 'vue'

const props = defineProps({
  // 内容，可以通过props传入
  content: {
    type: String,
    default: ''
  },
  // 最大行数
  maxLines: {
    type: Number,
    default: 1
  },
  // 宽度，可以是数字（单位为px）或字符串（如 '200px', '100%'）
  width: {
    type: [Number, String],
    default: '100%'
  },
  // tooltip 效果
  effect: {
    type: String,
    default: 'dark'
  }
})

const textContainer = ref(null)
const textContent = ref(null)
const isOverflowing = ref(false)

// 获取实际内容（优先使用slot内容，没有则使用props传入的content）
const contentValue = computed(() => {
  return props.content
})

// 检查文本是否溢出
const checkOverflow = async () => {
  await nextTick()
  if (!textContent.value) return

  const element = textContent.value
  // 检查元素是否溢出
  isOverflowing.value = element.scrollHeight > element.clientHeight ||
    element.scrollWidth > element.clientWidth
}

// 监听属性变化时重新检查溢出状态
watch(() => props.content, checkOverflow)
watch(() => props.maxLines, checkOverflow)
watch(() => props.width, checkOverflow)

onMounted(() => {
  checkOverflow()

  // 添加窗口大小变化时的检查
  window.addEventListener('resize', checkOverflow)
})

// 在组件销毁时移除事件监听
const onBeforeUnmount = () => {
  window.removeEventListener('resize', checkOverflow)
}
</script>

<style scoped>
.tooltip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
</style>
